<template>
  <div id="VT">
    <div class="userheader">
      <div class="userinfo">
        <div id="name">
          <img src="https://hshop.honorfile.com/shopdcGray/shopdc/cdn/modules/user-header/mb/images/defaultIcon.png"
            alt="">
          <span @click="login">登录&nbsp;|&nbsp;注册</span>
        </div>
        <div id="grow">
          <span>--成长值</span>
          <div class="progress"></div>
        </div>
        <div id="score">--积分</div>
      </div>
    </div>

    <div id="point">
      <div id="txt" ref="ref1">
        <figure v-for="(v, index) in vip" :key="index">
          <a :href="v.href" @click.prevent="login">
            <img :src="v.url" alt="">
            <span id="wenzi">{{ v.txt }}</span>
          </a>
        </figure>
      </div>
     <div id="down" @click="more" ref="ref2"></div> 
    </div>


  </div>
</template>

<script>
export default {
  data() {
    return {
      vip: []
    }
  },
  methods: {
    more() {
      this.$refs.ref1.style.height = "17.5765rem"
      this.$refs.ref2.style.display="none"
    },
    login(){
      this.$router.push('/wode')
    }
  },
  mounted() {
    this.$http({
      url: " http://localhost:3000/vip",
      method: "GET"
    }).then((res) => {
      this.vip = res.data;
    })
  }
}
</script>

<style lang="scss" scoped>
.userinfo #name img {
  width: 2.8125rem;
}

.userheader {
  font-family: HYQiHei-FZS;
  position: relative;
  padding: 1.25rem 1rem;
  background: none !important;
}

.userheader .userinfo {
  height: 10.25rem;
  position: relative;
  color: #626264;
  background: url('https://hshop.honorfile.com/shopdcGray/shopdc/cdn/modules/user-header/mb/images/user-header_mb_card_bg.png') no-repeat;
  background-size: 21.3125rem 10.125rem;
  padding: 1.25rem;
}

#name {
  display: flex;
  align-items: center;
}

#name span {
  margin-left: 1rem;
}


#grow {
  font-size: .75rem;
  margin-top: .75rem;
}

#grow .progress {
  width: 8.4375rem;
  height: .25rem;
  background-color: #949597;
  border-radius: .125rem;
  margin: .3125rem 0 0;
}

#score {
  font-size: .75rem;
  position: absolute;
  bottom: 1.25rem;
}

// 内容列表（菜单）
#point{
  width:100%;
  height:13.75rem;
  padding-bottom:.625rem;
  background-color: white;
}

#txt {
  width: 100%;
  height: 11.7188rem;
  background-color: white;
  overflow: hidden;
  padding-bottom: .625rem;
  overflow: hidden;
}

#txt figure {
  width: 4.6875rem;
  height: 5.8587rem;
  padding: .8464rem .3906rem 0;
  float: left;
}

#txt a {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#txt img {
  width: 2.625rem;
}

#txt #wenzi {
  box-sizing: border-box;
  display: block;
  font-size: .7813rem;
  text-align: center;
  width: 3.9063rem;
  height: 2.3956rem;
  padding-top: .5206rem;
}

#down {
  background: url("https://hshop.honorfile.com/shopdcGray/shopdc/cdn/modules/privilege/mb/images/privilege_mb_arrow.png") no-repeat;
  background-size: 1.1719rem;
  background-position:bottom center;
  height: 1.1719rem;
  background-color:white;
}
</style>